<template>
		
	<view>
		<u-loading-page loading-mode="semicircle" :loading="loading" color='#57E3A8' loading-text="请稍等"></u-loading-page>
		<view v-show="!loading">
			<view class="big_titel">
				<image :src="goods.cover_url" style="width: 60%;height: 100%;"></image>
			</view>
			<view class="context">
				<view class="context_topper">
					{{goods.title}}
				</view>
				<view class="context_bottom">
					<text>￥ {{goods.price}}</text>
					<text>库存 {{goods.stock}}</text>
					<text>销量 {{goods.sales}}</text>
				</view>
			</view>
			 <u-tabs @change="changBottom" :list="list" :scrollable='false' :current='current'  :lineWidth='40' class="bars"></u-tabs>
			<view class="bottom_1" v-show="bottomIndex === 0" style="overflow: hidden;">
				<rich-text :nodes="goods.details"></rich-text>
			</view>
			<view class="bottom_2" v-show="bottomIndex === 1" style="text-align: center;">
				暂无
			</view>
			<view class="bottom_3" v-show="bottomIndex === 2" style="background-color: rgba(0,0,0,0);">
				<u-grid :border="false" col="2" style="background-color: none;">
					<u-grid-item v-for="item,index in like_goods" :key="index+8"  class='listChildLayout' style="margin: 15rpx 0;">
						<Attr :item='item' @click.native="changRouter(item)" ></Attr>
					</u-grid-item>
				</u-grid>
			</view>
			<view  class="btn_bar" :style="{width:width + 1 +'px'}">
				<view class="mini_button">
					<view class="mini_button_main" :style="{color:goods.is_collect ? '#57E3A8' : '#000'}" @click="haveAttr">
						<uni-icons type="star" :color="goods.is_collect ? '#57E3A8' : '#000'"></uni-icons>
						收藏
					</view>
				</view>
				<view class="mini_button">
					<view class="mini_button_main" @click="changRouter({id:undefined,key:true})">
						<view class="list_num" v-show="carData.length > 0" >
							{{carData.length}}
						</view>
						<uni-icons type="shop"></uni-icons>
						购物车
					</view>
				</view>
				<view class="big_button">
					<view class="big_button_main" @click="getPushGoodList" :style="{
						 'opacity': goods.stock ? 1 : 0.5
					}">
						加入购物车
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {
				width:uni.getSystemInfoSync().windowWidth,
				list:[{
					name:'商品详情'
				},
				{
					name:'商品评论'
				},
				{
					name:'推荐商品'
				}],
				bottomIndex:0,
				id:0,
				like_goods:[],
				loading:true,
				goods:{},
				current:1
			};
		},
		methods: {
			changBottom({index}) {
				this.bottomIndex = index
			},
			changRouter({id,key}){
			key ?   uni.switchTab({
					url: '../../pages/shopping/shopping'
				})  : uni.navigateTo({
					url:`../../pagesLogin/detial/detial?id=${id}`
				})
				
			},
			async getPushGoodList(){
				const {id,stock} = this.goods
				if(!stock)return uni.showToast({
					title:'商品已经售尽',
					icon:'none'
				})
	 			const result = await uni.$u.api.reqPushShopCart({goods_id:id,num:1})
				uni.showToast({
					title:result == '' ? '加入成功' : '加入失败',
					icon:'none',
					success:()=> {
						this.getCatListDData()
					}
				})
			},
			async getAttrData(){
				const {like_goods,goods} =  await this.getGoodsDetial({id:this.id})
				this.like_goods = like_goods
				this.goods = goods
				this.loading = false
				return true
			},
			async haveAttr(){
				const result = await uni.$u.api.reqHaveAttr(this.id)
				if(result === ''){
					await this.getAttrData()
					uni.showToast({
						title:this.goods.is_collect ? '收藏成功' : '取消成功'
					})
				}
			},
			...mapActions('indexStore',['getGoodsDetial','getCatListDData'])
		},
		async onLoad({id}) {
			this.id = id
			this.getAttrData()
			this.getCatListDData()
		},
		onUnload(){
			this.getGoodsDetial({id:undefined,boolen:true})
		},
		computed: {
			...mapState('indexStore',['carData'])
		},
	}
</script>

<style lang="scss">
	/* #ifdef MP-WEIXIN */
		/deep/.u-tabs__wrapper__nav__item{
			width: 30% !important;
		}
	/* #endif */
	
	/deep/.u-loading-page {
		background-color:#F9F871;
	}
	/deep/.u-loading-icon > view{
		color: #57E3A8 !important;
		border:  #57E3A8 transparent transparent;
	}
	
.btn_bar{
	height: 120rpx;
	background-color: white;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	.mini_button{
		width: 15%;
		display: flex;
		justify-content: center;
		.mini_button_main{
			display: flex;
			align-items: center;
			position: relative;
			flex-direction: column;
			justify-content: center;
			font-weight: 700;
			font-size: 20rpx;
			width: 70%;
			.list_num{
				width: 30rpx;
				position: absolute;
				display: flex;
				top: 15rpx;
				border-radius: 50%;
				left: 45rpx;
				justify-content: center;
				align-items: center;
				height: 30rpx;
				background-color: #57E3A8;
			}
		}
	}
	.big_button{
		width: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
		.big_button_main{
			width: 95%;
			height: 90%;
			border-radius: 60rpx;
			background-color: #57E3A8;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			font-weight: 600;
		}
	}
}
/deep/.u-tabs__wrapper__nav__item{
	width: 33.3%;
	padding: 0;
	font-weight: 700;
}
.listChildLayout_child{
	background-color: white;
}
.big_titel{
	width: 100%;
	height: 450rpx;
	background-color: white;
	display: flex;
	justify-content: center;
}

[class^='bottom']{
	width: 95%;
	background-color: white;
	margin: 25rpx auto 50rpx;
	border-radius: 30rpx;
}

.bars{
	width: 95%;
	margin: 0 auto;
	background-color:#57E3A8;
	border-radius: 30rpx;
	
}
.context{
	width: 95%;
	height: 150rpx;
	border-radius: 40rpx;
	background-color: #00A2F0;
	margin: 20rpx auto;
	.context_topper{
		font-size: 40rpx;
		font-weight: 700;
		padding-top: 20rpx;
		padding-left: 20rpx;
	}
	.context_bottom{
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx 0;
		& text:nth-child(1){
			color: #AF1C77;
			font-weight: 700;
		}
		& text:nth-child(n+2){
			color: #fff;
		}
	}
}
page{
	background-color: #F9F871 !important;
	padding-bottom: 80rpx;
}
</style>
